@import "color";
@import "tailwind";
:root {
  --md-text-code: #c9def1;
  --md-link: #38bdf8;
  --md-link-hover: #0ea5e9;
  --md-c-info-b: #475569;
  --md-c-waring-b: #d97706;
  --md-c-tip-b: #047857;
  --md-c-danger-b: #dc2626;
  --md-bg-alt: #101010;
  --md-pure: black;
  --shadow: rgba(0, 0, 0, .3);
  --md-high-line: rgba(11, 18, 24, .5);
}

a {
  text-decoration: none;
}
.edit-area{
  padding-bottom: 128px;
  min-height: calc(100vh - 40px);
  @apply pt-10;
}

.content {
  @extend .md-text;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  outline: none;
  tab-size: 4;
  caret-color: #60a5fa;
  overflow: hidden;
  position: relative;
  .mermaid-container{
    @apply mb-3 cursor-default select-none bg-gray-500/5 py-3 rounded flex justify-center;
  }
  blockquote {
    p:not(:last-child){
      margin-bottom: 10px;
    }
  }
  [data-fnc="fnc"] {
    font-size: .85em;
    @apply dark:text-teal-500 align-super px-0.5 dark:hover:text-teal-600 duration-200 text-teal-600 hover:text-teal-700 transition-colors;
  }
  [data-fnd="fnd"] {
    @apply dark:text-lime-500 px-0.5 dark:hover:text-lime-600 duration-200 text-lime-600 hover:text-lime-700 transition-colors;
  }
  .high-text{
    border-radius: 1px;
    background: var(--md-high);
  }
  table, th, td {
    border-width: 1px;
    border-style: solid;
    border-collapse: collapse;
    @apply border-gray-300/60 dark:border-gray-200/10;
  }
  table {
    width: 100%;
    line-height: 24px;
    margin-bottom: 16px;
  }

  th, td {
    padding: 0 12px;
    text-align: left;
    line-height: 26px;
  }

  th {
    @apply dark:bg-gray-500/10 bg-gray-200/30;
  }

  p {
    line-height: 26px;
    min-height: 26px;
    white-space: pre-line;
    &:not(:last-child){
      margin-bottom: 16px;
    }
    &:last-child{
      margin-bottom: 0;
    }
  }
  h1,h2,h3,h4,h5,h6{
    position: relative;
  }
  h1 {
    font-size: 2em;
    margin-bottom: 24px;
    font-weight: 700;
  }

  h2 {
    font-weight: 600;
    font-size: 1.6em;
    line-height: 1.3333333;
    margin: 20px 0;
  }
  h3 {
    font-weight: 500;
    font-size: 1.3em;
    margin: 18px 0;
    line-height: 1.2;
  }

  h4 {
    font-weight: 500;
    font-size: 1.2em;
    margin-bottom: 16px;
    line-height: 1.2;
  }
  h5{
    font-weight: 500;
    font-size: 1em;
    margin-bottom: 14px;
  }
  a {
    font-weight: 500;
  }
  li{
    p:not(:last-child){
      margin-bottom: 6px;
    }
  }
  ul,ol {
    &:not(:last-child) {
      margin-bottom: 16px;
    }
  }
}

.inline-code {
  background: var(--md-bg-mute);
  border: 1px solid var(--md-bg-mute);
  font-size: .85em;
  border-radius: 4px;
  padding: 2px 5px;
  position: relative;
  top: -1px;
}

.m-table {
  position: relative;
  &:not(:last-child) {
    margin-bottom: 24px;
  }
  font-size: 0.9em;
}
.t-handle {
  @apply w-5 h-5 cursor-default duration-300 hover:bg-gray-600/30 rounded-sm flex items-center justify-center;
}
blockquote {
  padding: 6px 14px 6px 20px;
  position: relative;
  font-size: .9em;
  @apply bg-gray-200/50 dark:bg-gray-700/20 dark:text-gray-300 text-gray-600;
  blockquote{
    font-size: 1em;
  }
  &:not(:last-child) {
    margin-bottom: 16px;
  }
  margin-bottom: 0;
  &:before {
    content: '';
    left: -1px;
    top: -1px;
    height: calc(100% + 2px);
    @apply block absolute bg-blue-500 w-1;
  }
}

.m-list {
  list-style: disc;
  padding-left: 24px;
  li{
    &::marker{
      @apply text-gray-500;
    }
  }
}

ol.m-list {
  list-style: decimal;
  padding-left: 24px;
}

.m-list-item {
  line-height: 1.8em;
  position: relative;
  word-break: break-all;
  padding: 1px 0;
  p {
    line-height: inherit;
    margin: 0;
    &:not(:last-child) {
      margin-bottom: 12px;
    }
  }

  &.task {
    padding-left: 24px;
  }

  .check-item {
    display: inline-block;
    position: absolute;
    user-select: none;
    height: 2em;
    left: 0;
    top: 1px;
  }
}
.katex-container {
  .newline{
    margin: 4px 0;
  }
}
.m-hr {
  height: 1px;
  background: var(--md-border);
  margin: 2em 0;
  border: none;
}

.code-highlight {
  background: var(--md-code-bg);
  border-radius: 4px;
  &.tab-2{
    tab-size: 2;
  }
  &.tab-4{
    tab-size: 4;
  }
  font-size: 0.85em;
  position: relative;
  line-height: 22px;
  direction: ltr;
  &.katex-container{
    pre{
      position: relative;
      padding: 20px 0;
      &:before,&:after{
        content: '$$';
        color: rgba(255, 255, 255, .5);
        position: absolute;
        left: 6px;
        font-size: 12px;
      }
      &:before{
        top:4px
      }
      &:after{
        bottom:4px
      }
    }
  }
  pre{
    white-space: pre;
    position: relative;
    line-height: 22px;
    padding: 12px 0;
  }
  code{
    width: fit-content;
    display: inline-block;
    min-width: 100%;
    word-wrap: normal;
    word-spacing: normal;
    word-break: normal;
    hyphens: none;
    padding-left: 20px;
  }
  .code-line-list{
    background: var(--md-code-bg);
    counter-reset: step;
    border-radius: 4px;
    counter-increment: step 0;
    height: 100%;
    position: absolute;
    z-index: 10;
    left: 0;
    padding-top: 11px;
    width:32px;
    top: 0;
    border-right: 1px solid rgba(0,0,0,.5);
    > div{
      &:before{
        content: counter(step);
        counter-increment: step;
        color: rgba(255, 255, 255, .5);
      }
      font-size: .93em;
      left: 0;
      top: 0;
      height: 22px;
      line-height: 22px;
      width: 32px;
      text-align: center;
    }
  }
  &.num {
    code{
      padding-left: 44px;
    }
  }
  .code-line {
    padding-right: 20px;
    position: relative;
    //width: calc(100% + 24px);
  }

  .lang-select {
    width: 100px;

    .ant-select-selector {
      background: transparent;
    }

    input {
      text-align: center;
    }
  }
}

.code-highlight{
  margin-bottom: 16px;
  .ant-select-selection-search-input {
    color: white !important;
  }
}
